<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<script type="text/javascript" src="./dist/jquery-3.2.1.js"></script>
	<script type="text/javascript" src="./dist/js/bootstrap.js"></script>
	<link rel="stylesheet" type="text/css" href="./dist/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="./fontsize/iconfont.css">
	<title></title>
</head>
<style type="text/css">
	img{
		margin-bottom:15px;
		background:#ccc;
	}
	.row1{
		width:300px;
		height:100px;
		background:#ff0;

	}
	.row2{
		width:300px;
		height:100px;
		background:#0f0;
		float:right;
	}
</style>
<body>
	<!-- 实例1 -->
<div class="container">
	<div class="row">
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>	
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>	
		<div class='col-md-3'>
			<img src="logo.jpg" width='100%'>
		</div>			
	</div>
	<div class="row">
		<div class='col-md-4' >
			<img src="logo.jpg" width='100%'>
		</div>
	
		<div class='col-md-4 col-md-offset-4 pull-right'>
			<img src="logo.jpg" width='100%'>
		</div>			
	</div>
</div>


<!-- 实例2 -->
<div class="container">
	<h1 class="page-header">bootstrap<small> on board </small></h1>
	<p class="lead">THE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising voyageurshad met with many adventures by sea and land; and at length all these were exhausted, and, as the time drew near for their departure, the  deck;<mark>question arose where next to go, which question was diain Corbet, Wade, and Solomon, Bruce being in the chair—that is to say, on the taffrail. “All yo<del>scussed in full council assembled upon the</mark> present Bruce, Arthur, Bart, Tom, Phil, Pat, Capt</del>u that are in favor of going home, say ‘Ay’,” said Bruce.</p>
	<!-- 文本对齐 -->
	<p class='text-left'>左对齐</p>
	<p class="text-right">右对齐</p>
	<p class='text-justify'>两端对齐</p>
	<p class='text-center'>居中</p>
<!-- 文本大小写 -->
	<p class='text-lowercase'>LIIDNFSDHOSDJ</p>
	<p class="text-uppercase">ljasdoijdn</p>
	<p class='text-capitalize'>sdjhellomrs</p>

	<!-- 无样式列表 -->
	<ul class='list-unstyled'>
		<li>linux</li>
		<li>linux</li>
		<li>linux</li>
		<li>linux</li>
		<li>linux</li>
		<li>linux</li>
		<li>linux</li>
	</ul>
	<!-- 水平自定义列表 -->
	<dl class='dl-horizontal'>
		<dt>第一道选择</dt>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
		<dt>第一道选择</dt>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
		<dt>第一道选择</dt>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
			<dd>A:javascript</dd>
	</dl>
</div>
<p><code>linux</code>is veyr much</p>
<pre>按照原格式输出，自带一定的背景样式</pre>
<p><kbd>up the button</kbd>if you would</p>
<p><var>斜体</var></p>
<!-- 实例3:表格 -->
<div class="table-responsive">
<table class='table'>
	<tr class='active'>
		<th>ID TABLE HEADING</th>
		<th>USERNAMEID TABLE HEADING</th>
		<th>CODEID TABLE HEADING</th>
		<th>CODEID TABLE HEADING</th>
		<th>CODEID TABLE HEADING</th>
		<th>CODEVID TABLE HEADING</th>
		<th>ID TABLE HEADING</th>
		<th>USERNAMEID TABLE HEADING</th>
		<th>CODEID TABLE HEADING</th>
		<th>CODEID TABLE HEADING</th>
		<th>CODEID TABLE HEADING</th>
		<th>CODEVID TABLE HEADING</th>
	</tr>
	<tr class='info'>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
	</tr>
	<tr class='success'>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
	</tr>
	<tr class='warning'>
			<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
	</tr>
	<tr class='danger'>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
	</tr>
	<tr class='danger'>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
	</tr>
	<tr class='danger'>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
	</tr>
	<tr class='danger'>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
		<td>001</td>
		<td>002</td>
		<td>003</td>
	</tr>
</table>	
</div>
<!-- 实例四：按钮 -->
<button class="btn btn-default">默认样式</button>
<button class='btn btn-info'>按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-primary">按钮</button>
<button class="btn btn-link">按钮</button>
<button class="btn">按钮</button>
<button class="btn btn-lg">大按钮</button>
<button class="btn">默认大小的按钮</button>
<button class="btn btn-sm">小按钮</button>
<button class="btn btn-xs">微小按钮</button>
 <a href="" class="btn btn-block btn-lg btn-primary">ok</a>
<input type="button" class="btn btn-danger btn-block btn-lg" value='ok'>
<input type="submit" class="btn btn-primary btn-block btn-lg" value='ok'>
<input type="reset" class="btn btn-primary btn-block btn-lg" value='ok'>
<!-- 按钮实例：个人中心 -->
<div class="container">
	<div class="row">
		<div class="col-md-3">
			<button class="btn btn-danger btn-block" disabled>按钮</button>
			<button class="btn btn-danger btn-block">按钮</button>
			<button class="btn btn-danger btn-block">按钮</button>
			<button class="btn btn-danger btn-block">按钮</button>
			<button class="btn btn-danger btn-block">按钮</button>
			<button class="btn btn-danger btn-block">按钮</button>
		</div>
		<div class="col-md-9">
			<img src="logo.jpg" width='100%'>
		</div>
	</div>
</div>
<!-- 表单 -->
<form>
	<p>username</p>
	<input type="text" name="">
	<p>code</p>
	<input type="password" name="">
</form>
<input type="submit" class='btn btn-primary' value='ok'>
<input type="reset" class='btn btn-danger' value='cancel'>
<!-- 实例五：图片样式 -->
<div class="container">
	<h1 class='page-header'>bootstrap</h1>
	<img src="logo.jpg" class='img-rounded'>
	<img src="logo.jpg" class='img-circle'>
	<img src="logo.jpg" class='img-thumbnail'>
</div>
<!-- 实例六：辅助类 -->
<!-- 文字颜色 -->
<p class='text-muted'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising nd, ason the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='text-info'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprisinext t the chair—that is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='text-success'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprisiere next to go, w, hair—that is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='text-warning'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising voywhich questhat is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='text-danger'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising voywhich questhat is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='text-primary'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising voywhich questhat is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>

<!-- 文字背景色 -->
<p class='bg-info'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprisinext t the chair—that is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='bg-success'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprisiere next to go, w, hair—that is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='bg-warning'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising voywhich questhat is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='bg-danger'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising voywhich questhat is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<p class='bg-primary'>linux id very muchTHE Antelope had traversed all the waters of the Baie de Chaleur, and the enterprising voywhich questhat is to say, on the taffrail. “All you that are in favor of going home, say ‘Ay’,” said Bruce.</p>
<!-- 字符图标 -->
<h1>linux is <span class='close'>&times;</span></h1>
<h1 class='bg-primary'>linux is <button class='btn btn-danger pull-right'> more <span class='caret'></span></button></h1>
<!-- 清除浮动 -->
<div class="row1 center-block hide" ></div>
<div class="clearfix"></div>
<div class="row row2"></div>


</body>
<script type="text/javascript">
	$('.close').click(function(){
		$(this).parent().hide(1000);
	})
</script>
</html>